<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { Session } from '/@/utils/storage';
import { verifyPhone } from '/@/utils/toolsValidate';
import { useLoginApi } from '/@/api/login.js';

// 定义变量内容
const route = useRoute();
const router = useRouter()

const lxsAppData = reactive({
	loading: {
		signIn: false,
	},
	loginData: {
		code: '',
		mobile: '', // 手机号码
		captcha: '', // 短信验证码
	},
	captchaData: { // 验证码数据
		btnTip: '获取验证码', // 验证码提示
		time: 60, // 时长
		flag: 0, // 是否点击
		light: 0, // 输入手机号亮标
	},
	tips: {
		mobile: '', // 手机号码
		captcha: '', // 短信验证码
	}
})

// 切换登录
const emits = defineEmits(['switchType'])
const loginShow = (param: any) => {
	emits('switchType', param);
}

// 发送验证码
const sendCaptcha = async () => {
	if (lxsAppData.captchaData.flag == 0) {
		lxsAppData.captchaData.flag = 1;
		let time = lxsAppData.captchaData.time;

		try {
			await useLoginApi().sendCaptchaSubmit({mobile: lxsAppData.loginData.mobile}).then(data => {
				console.log('发送验证码结果', data);
				if (data?.data?.captcha) {
					lxsAppData.loginData.captcha = data?.data?.captcha;
				}
				if (data.code === 200) {
					const m = setInterval(() => {

						lxsAppData.captchaData.btnTip = --time + 'S后重新获取';

						if (time <= 0) {
							clearInterval(m);
							lxsAppData.captchaData.btnTip = '发送验证码';
							lxsAppData.captchaData.flag = 0;
						}
					}, 1000);
				} else {
					ElMessage.error(data.message)

					lxsAppData.captchaData.flag = 0;
				}
			})
		} catch (e) {
			lxsAppData.captchaData.flag = 0;
		}
	}
};

// 输入框验证
const handleInput = (type: string) => {
	if (type === 'mobile') {
		if (lxsAppData.loginData.mobile == '') {
			lxsAppData.captchaData.light = 0;
		} else {
			lxsAppData.captchaData.light = 1;
		}
		if (!verifyPhone(lxsAppData.loginData.mobile)) {
			lxsAppData.tips.mobile = '手机号格式不正确'
			return;
		} else {
			lxsAppData.tips.mobile = ''
		}
	} else if (type === 'captcha') {
		if (lxsAppData.loginData.captcha.length === 0) {
			lxsAppData.tips.captcha = '请输入验证码'
			return;
		} else {
			lxsAppData.tips.captcha = ''
		}
	}
}

// 验证码登录
const loginCaptcha = async () => {
	if (!verifyPhone(lxsAppData.loginData.mobile)) {
		lxsAppData.tips.mobile = '手机号格式不正确'
		return;
	} else {
		lxsAppData.tips.mobile = ''
	}
	if (lxsAppData.loginData.captcha.length === 0) {
		lxsAppData.tips.captcha = '请输入验证码'
		return;
	} else {
		lxsAppData.tips.captcha = ''
	}
	lxsAppData.loading.signIn = true;
	try {
		await useLoginApi().captchaLoginSubmit(lxsAppData.loginData).then(data => {
			if (data.code === 200) {
				Session.set('token', data.data.token);
				// Session.set('userInfo', data.data.user_info);
				signInSuccess(data.message)
			} else {
				lxsAppData.loading.signIn = false;
				ElMessage.error(data.message);
				return;
			}
		})

	} catch (e) {
		lxsAppData.loading.signIn = false;
		console.log(e);
	}
}

// 登录成功后的跳转
const signInSuccess = (message: string) => {
	// 登录成功，跳到转首页
	// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
	if (route.query?.redirect) {
		router.push({
			path: route.query?.redirect,
			query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
		});
	} else {
		router.push('/');
	}
	// 登录成功提示
	ElMessage.success(message);
	// 添加 loading，防止第一次进入界面时出现短暂空白
	NextLoading.start();
	lxsAppData.loading.signIn = false;
};
</script>

<template>
	<form class="login-form">
		<div>
			<div class="login-animation">
				<el-input class="el-input" placeholder="请输入手机号" @input="handleInput('mobile')" v-model="lxsAppData.loginData.mobile" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E6%89%8B%E6%9C%BA.png" alt="">
					</template>
				</el-input>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.mobile !== ''">
				<p>{{ lxsAppData.tips.mobile }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation flex flex-between">
				<el-input class="el-input el-captcha" placeholder="请输入验证码" @input="handleInput('captcha')" v-model="lxsAppData.loginData.captcha" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E9%AA%8C%E8%AF%81%E7%A0%81.png" alt="">
					</template>
				</el-input>
				<div class="verify-text" :class="{'verify-text-active' : lxsAppData.captchaData.flag, 'verify-text-light': lxsAppData.captchaData.light}" @click="sendCaptcha">{{ lxsAppData.captchaData.btnTip }}</div>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.captcha !== ''">
				<p>{{ lxsAppData.tips.captcha }}</p>
			</view>
		</div>

		<div class="login-change">
			<p @click="loginShow(0)">切换密码登录</p>
			<span @click="loginShow(4)">忘记密码?</span>
		</div>

		<div class="mt30">
			<el-button class="login-submit" @click="loginCaptcha" :loading="lxsAppData.loading.signIn">登录</el-button>
		</div>
	</form>
</template>

<style lang="scss">
.login-form {
	margin-top:20px;

	.login-animation {
		margin-top:25px;
		height: 44px;
		position: relative;

		.custom-input {
			width: 100%;
			height: 44px;
			padding-left: 40px;
			background: #F4F4F4;
			border-radius: 5px 5px 5px 5px;
			border: 1px solid #ECECEC;
		}

		.custom-input:focus {
			border: 1px solid #FC661C;
		}

		.el-input {
			width: 100%;
			height: 44px;

			:deep(.el-input__wrapper) {
				box-shadow: none !important;
				background: #F4F4F4;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #ECECEC;
			}
			.el-input__wrapper {
				--el-input-focus-border-color: #FC661C;
			}
		}

		.el-captcha {
			width: 64% !important;
		}

		.verify-text {
			border: none;
			width: 118px;
			height: 44px;
			background: rgba(252,102,28,0.5);
			border-radius: 5px 5px 5px 5px;
			color: #fff;
			line-height: 44px;
			text-align: center;
			transition: all 0.2s ease;
			cursor: pointer;
			margin-left: 20px;
		}
		.verify-text:active {
			background: #FC661C;
		}
		.verify-text:hover {
			background: #FC661C;
		}
		.verify-text-light {
			background: rgba(252,102,28,0.8);
		}
		.verify-text-active {
			background-color: #999999;
		}

		.icon {
			width: 20px;
			height: 20px;
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
		}

		.pass-light {
			width: 24px;
			height: 24px;
			position: absolute;
			right: 14px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.login-change {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 14px;
			color: #FC661C;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			cursor: pointer;
		}

		span {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 14px;
			color: #666666;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			cursor: pointer;
		}
		span:hover {
			color: #FFCFB8;
		}
	}

	.login-submit {
		border: none !important;
		color: #FFFFFF;
		width: 380px;
		height: 48px;
		line-height: 48px;
		margin: 0 auto;
		text-align: center;
		background: #FC661C;
		border-radius: 5px 5px 5px 5px;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: rgba(255,255,255,0.8);
		font-style: normal;
		text-transform: none;
		cursor: pointer;
		box-shadow: skew(-10deg);
		transition: all 0.1s ease;
	}
	.login-submit:hover {
		background-color: #FFCFB8;
	}
	.login-submit:active {
		letter-spacing: 0px;
		transform: skew(-4deg) translateY(4px);
		background-color: #FFCFB8;
	}
}
</style>